<template>
  <el-form :model="model" label-width="80px" class="mb-3">
    <el-row :gutter="20">
      <slot />

      <template v-if="showsearch">
        <slot name="show"></slot>

        <el-col :span="8" :offset="showsearch ? 0 : 8">
          <div class="flex items-center justify-end">
            <el-button type="primary" @click="$emit('search')">
              搜索
            </el-button>
            <el-button @click="$emit('reset')">重置</el-button>

            <el-button
              type="primary"
              text
              @click="showSearch = !showSearch"
              v-if="hasShowSearch"
            >
              {{ showSearch ? "收起" : "展开" }}
              <el-icon>
                <ArrowUp v-if="showSearch" />
                <ArrowDown v-else />
              </el-icon>
            </el-button>
          </div>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script setup>
import { useSlots } from "vue";
import { ref, reactive } from "vue";
defineProps({
  model: Object,
});

defineEmits(["reset", "search"]);

const showSearch = ref(false);

const slots = useSlots();

const hasShowSearch = ref(!!slots.show);
</script>
<style scoped></style>
